<template>
    <div id="home">
        <div class="header-box"  v-loading="pageLoading">
            <div class="category-box"><span>首页 </span>&gt; 数据统计</div>
            <!--<div class="money-box">
                <span class="fa-stack mic">
                    <i class="fa fa-circle-thin fa-stack-2x" aria-hidden="true"></i>
                    <i class="fa fa-jpy fa-stack-1x" aria-hidden="true"></i>
                </span>
                剩余金额 : <span class="rest-money">1314</span> 
                <button class="chongqian">充值</button>
            </div>
            <div class="api-box">
                <i class="fa fa-server"></i>
                剩余接口数 : <span class="rest-num">100.00%</span>(接口总数: 10000)
                <span class="add-num">增加接口数</span>
            </div>-->
        </div>
        
        <div class="mini-charts" style="margin-top:15px;">
            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="mini-charts-item">
                        <div class="clearfix">
                            <div class="count abc">
                                <small class="text-s1">新增访问次数<span style="line-height: 2;" class="pull-right">累积人数: {{topData.activity_pv.total}}</span></small>
                                <hr>
                                <small class="text-s1 ye" style="display:block;padding-top:70px;">相比昨天 <span class="up"><i class="fa trend-arrow"
                                       :class="{'fa-arrow-up': topData.activity_pv.type == 'up','fa-arrow-down': topData.activity_pv.type == 'down'}"></i>{{topData.activity_pv.trend}}</span></small>
                                <div class="big-num" style="left:14px;">{{topData.activity_pv.new}}</div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="mini-charts-item">
                        <div class="clearfix">
                            <div class="count abc">
                                <small class="text-s1">新增参与人数<span style="line-height: 2;" class="pull-right">累积人数: {{topData.activity_record.total}}</span></small>
                                <hr>
                                <small class="text-s1 ye" style="display:block;padding-top:70px;">相比昨天 <span class="up"><i class="fa trend-arrow"
                                       :class="{'fa-arrow-up': topData.activity_record.type == 'up','fa-arrow-down': topData.activity_record.type == 'down'}"></i>{{topData.activity_record.trend}}</span></small>
                                <div class="big-num" style="left:14px;">{{topData.activity_record.new}}</div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="mini-charts-item">
                        <div class="clearfix">
                            <div class="count abc">
                                <small class="text-s1">奖品领取人数<span style="line-height: 2;" class="pull-right">累积人数: {{topData.activity_exchange.total}}</span></small>
                                <hr>
                                <small class="text-s1 ye" style="display:block;padding-top:70px;">相比昨天 <span class="up"><i class="fa trend-arrow"
                                       :class="{'fa-arrow-up': topData.activity_exchange.type == 'up','fa-arrow-down': topData.activity_record.type == 'down'}"></i>{{topData.activity_exchange.trend}}</span></small>
                                <div class="big-num" style="left:14px;">{{topData.activity_exchange.new}}</div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="mini-charts-item">
                        <div class="clearfix">
                            <div class="count abc">
                                <small class="text-s1">活动分享人数<span style="line-height: 2;" class="pull-right">累积人数: {{topData.activity_share.total}}</span></small>
                                <hr>
                                <small class="text-s1 ye" style="display:block;padding-top:70px;">相比昨天 <span class="up"><i class="fa trend-arrow"
                                       :class="{'fa-arrow-up': topData.activity_share.type == 'up','fa-arrow-down': topData.activity_record.type == 'down'}"></i>{{topData.activity_share.trend}}</span></small>
                                <div class="big-num" style="left:14px;">{{topData.activity_share.new}}</div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="card">
            <div class="title-header">活动及奖品数据统计概况
                <span>
                    <el-date-picker
                      v-model="prizeNumDate"
                      type="daterange"
                      align="right"
                      range-separator=" 至 "
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      @change="setAllDate">
                    </el-date-picker>
                </span>
            </div>
            <div class="charts-box">
                <div class="charts-item-box" :class="{'charts-item-box-left': i % 2 == 0, 'charts-item-box-right': i% 2 != 0}" v-for="(active,i) in activeItemDateArr">
                    <div class="charts-title-header">{{active.title}}
                        <span>
                            <el-date-picker
                              v-model="active.time"
                              type="daterange"
                              align="right"
                              range-separator=" 至 "
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              @change="activeChange(i)"
                              :picker-options="pickerOptions">
                            </el-date-picker>
                        </span>
                    </div>
                    <div class="echart-box">
                        <tendency :idName="active.idName" :sevenDate='active.yArr' :sevenDay='active.xArr'></tendency>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
	import tendency from '../components/tendency' 
    import * as api from './../api/api'
	import dtime from 'time-formater'
    export default {
    	data(){
    		return {
                pageLoading:false,  
                prizeNumDate: '',
                topData: {},
                activeItemDateArr:[
                  {
                    time: '',
                    title: "活动访问量",
                    idName: 'line1',
                    type:1,
                    xArr:[],
                    yArr:[[], [], []]
                  },
                  {
                    time: '',
                    title: "活动参与量",
                    idName: 'line2',
                    type:2,
                    xArr:[],
                    yArr:[[], [], []]
                  },
                  {
                    time: '',
                    title: "活动分享数",
                    idName: 'line3',
                    type:3,
                    xArr:[],
                    yArr:[[], [], []]
                  },
                  {
                    time: '',
                    title: "活动中奖数",
                    type:4,
                    idName: 'line4',
                    xArr:[],
                    yArr:[[], [], []]
                  },
                    {
                    time: '',
                    title: "奖品兑换数",
                    idName: 'line5',
                    type:5,
                    xArr:[],
                    yArr:[[], [], []]
                  },
                  {
                    time: '',
                    title: "活动曝光数",
                    idName: 'line6',
                    type:6,
                    xArr:[],
                    yArr:[[], [], []]
                  },
                ],
                pickerOptions: {
                  shortcuts: [
                  {
                    text: '今天',
                    onClick(picker) {
                      const end = new Date();
                      const start = new Date();
                      picker.$emit('pick', [start, end]);
                    }
                  },
                  {
                    text: '昨天',
                    onClick(picker) {
                      const end = new Date();
                      const start = new Date();
                      start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
                      end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                      picker.$emit('pick', [start, end]);
                    }
                  },
                  {
                    text: '过去7天',
                    onClick(picker) {
                      const end = new Date();
                      const start = new Date();
                      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                      picker.$emit('pick', [start, end]);
                    }
                  }, 
                  {
                    text: '过去30天',
                    onClick(picker) {
                      const end = new Date();
                      const start = new Date();
                      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                      picker.$emit('pick', [start, end]);
                    }
                  }]
                }
    		}
    	},
    	components: {
    		tendency,
    	},
        created(){
            this.statisticsTop();
        },
    	mounted(){
            var that = this;
            var _now = that.formatDate(new Date());
            var _last = that.formatDate(new Date().getTime() - 86400000*6);
            var str = _last + '至' + _now;
            that.allChangeEvent(str);
    	},
        computed: {

        },
    	methods: {
            statisticsTop(){
                var that = this;
                that.pageLoading=true;
                //数据统计顶部数据
                api.statisticsTop({}).then(res => {
                    that.pageLoading=false;
                    if (res.status != 200)return;
                    var fetchData = res.data.data;
                    for (var key in fetchData) {
                        var trend;
                        if (fetchData[key].before == 0 && fetchData[key].new != 0) {
                            trend = 100;
                        } else if (fetchData[key].before == 0 && fetchData[key].new == 0) {
                            trend = 0;
                        } else {
                            trend = Math.round(((fetchData[key].new-fetchData[key].before)*10000)/fetchData[key].before)/100;
                        }
                        
                        if (trend >= 0) {
                            fetchData[key]['type'] = 'up';
                        } else {
                            fetchData[key]['type'] = 'down';
                        }
                        fetchData[key]['trend'] = Math.abs(trend).toFixed(2) + '%';
                    }
                    that.topData = fetchData;
                })   
            },

            allChangeEvent(val){
                for(let i = 0; i < 6; i++){
                    var oval = this.activeItemDateArr[i];
                    oval.time = val.split('至');
                    this.activeItemDateArr.splice(i, 1, oval);
                    this.activeChange(i);
                }
            },
            setAllDate(val){
                for(let i = 0; i < 6; i++){
                    var oval = this.activeItemDateArr[i];
                    oval.time = val.split('至');
                    this.activeItemDateArr.splice(i, 1, oval);
                }
            },
            activeChange(i){
                var that = this;
                let data = this.activeItemDateArr[i];
                that.pageLoading=true;
                api.getActiveItemData({
                    type: data.type,
                    start_time: this.formatDate(data.time[0]),
                    end_time: this.formatDate(data.time[1])
                }).then(res=>{
                    that.pageLoading=false;
                    if (res.data.data)
                    var fetchData = res.data.data.activity;
                    for (var ele in fetchData) {
                        data.xArr.push(ele);
                        data.yArr[0].push(fetchData[ele].users);
                        data.yArr[1].push(fetchData[ele].total);
                        //平均次数
                        var average = 0;
                        if (fetchData[ele].total != 0 || fetchData[ele].users != 0) {
                            average = Math.round(fetchData[ele].total/fetchData[ele].users);
                        }
                        data.yArr[2].push(average);
                    }
                })
            },
            formatDate(val){
                var date = new Date(val);
                var month = date.getMonth() < 9 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1);
                var day = date.getDate() < 9 ? '0' + date.getDate() : date.getDate();
                return date.getFullYear()  + "-" + month + '-' + day;
            }
    	}
    }
</script>

<style lang="less" scoped>
    #home{
        background-color: #f4f8fb;
        width:100%;
        min-height: 100%;
        padding:20px 40px;
        box-sizing: border-box;
    }
    .header-box{
        height: 30px;
    }
    .category-box{
        color:#666666;
        font-size: 14px;
        float:left;
        padding-right:104px;
        border-right: 1px solid #e8e8e8;
    }
    .category-box span{
        color:#1b2b38;
    }
    .money-box{
        float:left;
        color:#666666;
        font-size: 14px;
        padding:0 47px;
        border-right:1px solid #e8e8e8;
    }
    .fa-jpy{
        position: relative;
    }
    .mic{
        font-size: 12px;
        color: #ff5a08;
        transform:scale(0.7);
    }
    .chongqian{
        background: #169bd5;
        color:#ffffff;
        border-color:#169bd5;
        margin-left:5px;
        font-size: 13px;
        padding:2px 15px 3px;
        margin-left: 10px;
        cursor: pointer;
    }
    .rest-money{
        color:#ff5a08;
    }
    .api-box{
        padding-left:47px;
        color:#666666;
        font-size: 14px;
        float: left;
    }
    .fa-server{
        color:#2db7f5;
        margin-right: 6px;
    }
    .rest-num{
        color:#2db7f5;
        margin: 0 8px;
    }
    .add-num{
        color:#2db7f5;
        margin-left: 18px;
        cursor:pointer;
    }
    .pt25 {
        padding-top: 25px;
    }
    .mini-charts-item {
        position: relative;
        margin-bottom: 30px;
        background-color: #ffffff;
    }
    .mini-charts-item:before {
        -webkit-transition: width;
        -o-transition: width;
        transition: width;
        -webkit-transition-duration: .5s;
        transition-duration: .5s;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
        content: "";
        width: 105px;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }
    .mini-charts-item .chart {
        padding: 19px;
        float: left;
    }
    .mini-charts-item .count {
        overflow: hidden;
        color: rgba(255,255,255,.9);
        padding: 16px 12px;
    }
    .mini-charts-item .count>small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mini-charts-item .count>h2, .mini-charts-item .count>small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mini-charts-item .count>h2 {
        margin: 0;
        line-height: 100%;
        font-size: 22px;
        font-weight: 300;
    }
    .mini-charts-item {
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
    }
	.pl40 {
        padding-left: 40px;
    }
    .abc{
        position:relative;
    }
    .text-s1{
        line-height: 1.2;
        font-size: 12px;
        color:#333333;
    }
    hr{
        margin-top:10px;
        height: 1px;
        border:none;
        border-top:1px solid #e8e8e8;
    }
    .text-s2{
        line-height: 1.2;
        font-size: 14px;
        display: block;
        margin-bottom:50px;
    }
    .big-num{
        font-size: 32px;
        position: absolute;
        bottom:46px;
        right:40px;
        color:#333333;
    }
    .ye{
        color:#888888;
    }
    .info-box{
        display: inline-block;
        margin-left: 60px;
    }
    .info-box span{
        padding:0 40px;
        border-left:1px solid #333333;
    }
    .chartbox1{
        padding:30px;
        height: 500px;
    }
    .chartboxitem{
        float: left;
        width:50%;
        height: 100%;
    }
    #trendbox1{
        height: 80px;
        margin: 30px 0;
        position: relative;
    }
    .trend-item{
        height: 100%;
        background: #2b343a;
        color:#ffffff;
        float:left;
        width:32.6%;
        position: relative;
    }
    #trendbox1 .trend-item:nth-child(2){
        float:none;
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin: auto;
    }
    #trendbox1 .trend-item:last-child{
        float:right;
    }
    .trend-item:before{
        content:'';
        width:1px;
        height: 80%;
        background: #ffffff;
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin: auto;
    }
    .trend-left{
        width:50%;
        float:left;
        text-align: right;
        box-sizing: border-box;
        padding-right:3%;
    }
    .trend-left p{
        font-weight: bold;
        line-height:2.4;
    }
    .trend-right{
        width:50%;
        float:left;
        line-height: 80px;
        box-sizing: border-box;
        padding-left: 5%;
        font-weight: bold;
    }
    .up{
        color:#87d068;
    }
    .down{
        color:red;
    }
    .trend-arrow{
        font-size: 13px;
        margin-right:3px;
        margin-left: 2px;
    }
    .title-header{
        font-size: 16px;
        margin-bottom: 20px;
        line-height: 3.5;
        border-radius: 1px;
        text-indent: 14px;
        background: #ffffff;
        position: relative;
    }
    .title-header span{
        position: absolute;
        top:0;
        bottom:0;
        margin: auto;
        right:30px;
    }
    .el-date-editor--daterange.el-input {
        width: 280px;
    }
    .nav-pills li{
        cursor:pointer;
    }
    .swiper-box{
        float:left;
        width:33.33%;
    }
    .card{
        overflow: hidden;
    }
    .charts-box:after{
        content:'';
        display: block;
        clear:both;
        height: 0;
    }
    .charts-item-box{
        background: #ffffff;
        padding:0 18px;
        box-sizing: border-box;
        width:48%;
        height: 336px;
        margin-bottom: 10px;
    }
    .charts-item-box .el-date-editor--daterange.el-input {
        width: 226px;
    }
    .charts-item-box-left{
        float:left;
    }
    .charts-item-box-right{
        float:right;
    }
    .charts-title-header{
        font-size: 14px;
        color:#333333;
        height: 54px;
        line-height: 54px;
        position: relative;
    }
    .charts-title-header span{
        position: absolute;
        top:0;
        bottom:0;
        margin: auto;
        right:-2px;
    }
    .echart-box{
        height: 250px;
    }
</style>
